<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// { type, props.introduce, index, bg } 
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  introduce: {
    type: Object,
    default: {},
  },
  index: {
    type: Number,
    default: 0,
  },
  bg: {
    type: String,
    default: '',
  }
});
// defineProps({
//   type: String,
//   introduce: Object,
//   index: Number,
//   bg: String
// });

const goToDetail = (id) => {
  console.log('121221', props.type,props.introduce)
  router.push({ path: '/schoolDetail', query: { id, type:props.type } });
};
const count = ref(0);
</script>

<template>
  <div @click="goToDetail(props.introduce.id)" class="schoolProject" :style="{ 'background-image': `url(${props.bg})` }">
    <div v-if="props.index == 0" class="schoolProject-tip1"></div>
    <div v-if="props.index == 1" class="schoolProject-tip2"></div>
    <div v-if="props.index == 2" class="schoolProject-tip3"></div>
    <div class="schoolProject-logo">
      <img :src="props.introduce.coverimage" />
    </div>
    <div class="schoolProject-title"> {{ props.introduce.titile }}</div>
    <div class="schoolProject-subtitle">
      {{ props.introduce.subtitle }}
    </div>
  </div>
</template>

<style scoped lang="less">
.schoolProject {
  position: relative;
  background-size: 100%;
  // width: 366px;
  height: 127px;
  background-image: url('../../../assets/images/tabdetail-schoolbg.png');
  background-size: 100%;

  .schoolProject-tip1 {
    position: absolute;
    top: -2px;
    width: 50px;
    height: 30px;
    right: 40px;
    background-image: url('../../../assets/images/tabdetail-NO1.png');
    background-size: 100%;
  }

  .schoolProject-tip2 {
    position: absolute;
    top: -2px;
    width: 50px;
    height: 30px;
    right: 40px;
    background-image: url('../../../assets/images/tabdetail-NO2.png');
    background-size: 100%;
  }

  .schoolProject-tip3 {
    position: absolute;
    top: -2px;
    width: 50px;
    height: 30px;
    right: 40px;
    background-image: url('../../../assets/images/tabdetail-NO3.png');
    background-size: 100%;
  }

  .schoolProject-logo {
    position: absolute;
    width: 106px;
    height: 106px;
    top: -10px;
    left: -10px;
    background: #D8D8D8;
    box-shadow: 0px 3px 6px 1px rgba(164, 164, 164, 0.5);

    img {
      width: 100%;
      height: 100%;

    }
  }

  .schoolProject-title {
    margin-left: 119px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 25px;
    padding-top: 17px;
    margin-bottom: 9px;
    margin-left: 113px;
    width: 199px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .schoolProject-subtitle {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
    margin-left: 113px;
    width: 199px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
</style>
